<template>
<!-- vue在渲染dom的时候回去查找dom 如果找到了template标签就会调用vue的render函数 render函数是一个渲染函数 -->
    <div :title="title">
    {{msg}}
        <ul>
            <li v-for="item in arr" :key="item" @click="choseLi(item)">{{item}}</li>
        </ul>
    </div>
</template>
<script>
export default {
    // props: ['msg']
    props: {
        msg: String,
        title: {
            type: String,
            default: '',
            required: true
        },
        arr: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    inject: ['name', 'age', 'sex', 'tel'],
    data() {
        return {
            type:'child'
        }
    },
    created() {
        // console.log(this.name);
        // console.log(this.sex)
        // console.log(this.tel)
        console.log(this.$parent.msg)
        this.$parent.fun()
        
    },

    methods: {
        choseLi(item) {
            this.$emit('chose', item, 1, 2, 3) 
        }
    }
}
</script>
